<template>
    <view class="p-bot140" :style="{ '--color': color }">
        <status-bar title="收货地址"></status-bar>
        <!-- <view class="row a-center bgwhite padding20 bor_radius_10" @click="chooseAddress">
			<view class="iconfont icon-weixin color_wechat size42"></view>
			<text class="black size26 m-left20">获取微信收货地址</text>
			<view class="iconfont icon-a-zujian7 h6 color_99 j-self-end"></view>
		</view> -->

        <view class="row a-center bgwhite m-top20 list bor_radius_10" v-for="(item, index) in pageData" :key="index">
            <view class="flex-1 d-flex f-column" @click="saveDefaultAddress(item.id)">
                <text class="black size28 bold500">{{ item.Aregion }}{{ item.Aaddress }}{{ item.room_number }}</text>
                <view class="d-flex a-center m-top20">
                    <view class="acquiesce white h7 padding2-10 bor_radius_10 m-right20" v-if="item.is_default == 1">默认</view>
                    <text class="color_99 h6 m-right16">{{ item.Aname }}</text>
                    <text class="color_99 h6">{{ item.Amobile }}</text>
                </view>
            </view>
            <view class="iconfont icon-bianji color_cc size30 edit" @click.stop="toUrl(`editAddress?id=${item.id}&bid=${item.bid}&type=2`)"></view>
        </view>

        <emptys empty="address" v-if="!pageData.length"></emptys>

        <view class="Addressbot white size28 flexac" @click="toUrl(`editAddress?type=1`)">+新增地址</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                pageData: []
            };
        },
        onShow() {
            this.getAddress();
        },
        methods: {
            async chooseAddress() {
                const addressResult = await this.$pop.chooseAddress();
                if (addressResult) this.getAddress();
            },
            getAddress() {
                // 获取收货地址
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/getAddress'
                    })
                    .then((res) => {
                        if (!res.data) return;
                        this.pageData = res.data;
                    });
            },

            addAdress(item) {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/addAdress',
                        data: {
                            Aname: item.userName,
                            Amobile: item.telNumber,
                            Aregion: `${item.provinceName}${item.cityName}${item.countyName}`,
                            Aaddress: item.detailInfo,
                            is_default: 0
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.getAddress();
                    });
            },

            saveDefaultAddress(id) {
                this.$http
                    .get({
                        url: '/zzj_singleSaleApi/saveDefaultAddress',
                        data: {
                            id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg, 2);
                        this.$back();
                    });
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style>
    page {
        background-color: #f7f9fa;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
    }
</style>
<style lang="scss" scoped>
    .list {
        padding: 26rpx 0 26rpx 20rpx;
    }

    .edit {
        padding: 20rpx 20rpx 20rpx 40rpx;
    }

    .Addressbot {
        width: 690rpx;
        height: 80rpx;
        position: fixed;
        bottom: 100rpx;
        left: 30rpx;
        border-radius: 40rpx;
        z-index: 100;
        background-color: var(--color);
    }

    .acquiesce {
        background-color: var(--color);
    }
</style>